<template>
  <div>
    <div v-for="item in orders" :key="item.id" class="order_main">
      <div class="order_head">
        <span class="head_id">订单编号:{{ item[0].order_id }}</span>
        <span>订单时间:{{ item[0].order_time | dateFormat }}</span>
      </div>
      <div class="order_center">
        <table style="width: 100%; text-align: center">
          <tr>
            <td></td>
            <td>商品名称</td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>
          </tr>
          <tr v-for="it in item">
            <td>
              <img
                :src="'http://106.15.179.105:3000/' + it.product_picture"
                alt=""
                style="width: 120px"
              />
            </td>
            <td @click="goDetail(it.product_id)">{{ it.product_name }}</td>
            <td>{{ it.product_price }}元</td>
            <td>{{ it.product_num }}</td>
            <td style="color: #ff6700">
              {{ it.product_price * it.product_num }}元
            </td>
          </tr>
        </table>
      </div>
      <div class="order_foot">
        <span
          >共<span style="color: #ff6700">{{ item|getNum }}</span
          >件商品</span
        >
        <span style="color: #ff6700"
          >合计:
          <span style="font-size: 24px">{{ item|getPrice }}元</span></span
        >
      </div>
    </div>
  </div>
</template>

<script>
import orderApi from "../api/orderApi";
export default {
  data() {
    return {
      orders: [
        [
          {
            id: 3745,
            order_id: 29091618793789096,
            user_id: 2909,
            product_id: 3,
            product_num: 7,
            product_price: 2599,
            order_time: 1618793789098,
            product_name: "小米CC9 Pro",
            product_picture: "public/imgs/phone/Mi-CC9.png",
          },
          {
            id: 3746,
            order_id: 29091618793789096,
            user_id: 2909,
            product_id: 2,
            product_num: 3,
            product_price: 2599,
            order_time: 1618793789098,
            product_name: "Redmi K30 5G",
            product_picture: "public/imgs/phone/Redmi-k30-5G.png",
          },
        ],
        [
          {
            id: 3742,
            order_id: 29091618793305920,
            user_id: 2909,
            product_id: 2,
            product_num: 5,
            product_price: 2599,
            order_time: 1618793305922,
            product_name: "Redmi K30 5G",
            product_picture: "public/imgs/phone/Redmi-k30-5G.png",
          },
          {
            id: 3743,
            order_id: 29091618793305920,
            user_id: 2909,
            product_id: 4,
            product_num: 4,
            product_price: 699,
            order_time: 1618793305922,
            product_name: "Redmi 8",
            product_picture: "public/imgs/phone/Redmi-8.png",
          },
          {
            id: 3744,
            order_id: 29091618793305920,
            user_id: 2909,
            product_id: 11,
            product_num: 2,
            product_price: 2799,
            order_time: 1618793305922,
            product_name: "小米全面屏电视E65A",
            product_picture: "public/imgs/appliance/MiTv-E65A.png",
          },
        ],
        [
          {
            id: 3661,
            order_id: 29091618555494770,
            user_id: 2909,
            product_id: 16,
            product_num: 1,
            product_price: 2599,
            order_time: 1618555494768,
            product_name: "米家互联网空调C1（一级能效）",
            product_picture: "public/imgs/appliance/AirCondition-V1C1.png",
          },
        ],
        [
          {
            id: 3659,
            order_id: 29091618555408096,
            user_id: 2909,
            product_id: 2,
            product_num: 1,
            product_price: 2599,
            order_time: 1618555408096,
            product_name: "Redmi K30 5G",
            product_picture: "public/imgs/phone/Redmi-k30-5G.png",
          },
          {
            id: 3660,
            order_id: 29091618555408096,
            user_id: 2909,
            product_id: 4,
            product_num: 2,
            product_price: 699,
            order_time: 1618555408096,
            product_name: "Redmi 8",
            product_picture: "public/imgs/phone/Redmi-8.png",
          },
        ],
      ],
    };
  },
  activated() {
    this.getOrder();
    this.getNum();
  },
  methods: {
    async getOrder() {
      console.log(this.$store.state.user_id);
      let { data: res } = await orderApi.getOrder({
        user_id: this.$store.getters.getUser.user_id,
      });
      console.log(res);
    },
    goDetail(id) {
      this.$router.push("/detail?productID=" + id);
    }
  },
  filters:{
    getNum:function(value) {
      var num =0 
      value.forEach(item => {
        num+= item.product_num 
      });
      return num
    },
    getPrice:function(value) {
      var price = 0
      value.forEach(item=>{
        price += item.product_num * item.product_price
      })
      return price
    }
  }
};
</script>

<style lang="scss" scoped >
.order_main {
  width: 1225px;
  margin: 20px auto;
  background-color: white;
}
.order_head {
  display: flex;
  justify-content: space-between;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  border-bottom: solid 2px #ff6700;
  .head_id {
    color: #ff6700;
  }
}
td {
  width: 20%;
}
.order_center {
  padding: 20px 0;
  border-bottom: solid 2px #ff6700;
}
.order_foot {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
}
</style>
